<template>
	<view class="container">	
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<navigator url="/pages/index/search" hover-class="none">
				<input class="ser-input" type="text" value="输入关键字搜索" disabled />
			</navigator>
		</view>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<swiper autoplay="true" interval="3000" duration="1000" class="carousel" circular indicator-dots="true"
				previous-margin="20px" next-margin="20px">
				<swiper-item v-for="(item, index) in carouselList" :key="item.id">
					<view class="carousel-item" @click="goDetail(item)">
						<image :src="item.imgUrl" class="image" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin-top: -160rpx;">

			<!-- 公告 -->
			<view v-if="noticesList && noticesList.length > 0" class="post-section">
				<swiper style="height: 100%" :circular="true" :autoplay="true" :vertical="true">
					<swiper-item v-for="(item, index) in noticesList" :key="item.id">
						<view class="yticon icon-xiaoxi content" style="color: #6495ED !important;padding-left: 20rpx;"
							@click="goNoticesDetail(item.id)"> {{ item.title }} </view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 父级服务 -->
			<!-- <u-scroll-list :indicator="indicator">
			<view class="parentCategory">
				<view v-for="(item, index) in newList" :key="item.value"
					:class="inx == index?'afterScrollItem':'scrollItem'" :id="index" @click="getChildrenList">
					{{ item.label }}
				</view>
			</view>
		</u-scroll-list> -->
			<!-- 子级服务 -->
			<!-- <view class="cate-section">
			<view v-for="(item, index) in childrenCategoryList" class="cate-item"
				@click="goService(item)">
				<image :src="item.url" />
				<text>{{ item.label }}</text>
			</view>
		</view> -->
			<!-- 服务管理 -->
			<!-- <view class="cate-section" style="">
			<view v-for="(item, index) in childrenCategoryList" class="cate-item"
				@click="goService(item)">
				<image :src="item.url" />
				<text>{{ item.label }}</text>
			</view>
			<view v-if="childrenCategoryList.length>=7" class="cate-item" @click="goServiceList">
				<image src="/static/more.png" />
				<text>更多</text>
			</view>
		</view> -->
			<view class="cate-section">
				<view class="cate-item" @click="gotoNews">
					<image src="../../static/errorImage.jpg" />
					<text>政策查询</text>
				</view>
				<view class="cate-item" @click="gotoNews">
					<image src="../../static/errorImage.jpg" />
					<text>申报查询</text>
				</view>
			</view>
			<view class="cate-section" style="">
				<view v-for="(item, index) in serverData" class="cate-item" @click="goPage(item.url)">
					<image :src="item.img" />
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view v-if="recommendList.length>0">
				<view style="text-align: center;color: #999;margin:0 0 20px;">
					—— 为您推荐 ——
				</view>
				<view class="recommend">
					<view v-for="(item, index) in recommendList" class="recommend-item" @click="goRecommend(item)">
						<image :src="item.imgUrl" />
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 协会展示 企业展示 -->
		<view class="tab-content">
			<u-tabs :list="informationData" :key="id" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
                  color: '#303133',
                  fontWeight: 'bold',
                  transform: 'scale(1)'
              }" :inactiveStyle="{
                  color: '#606266',
                  transform: 'scale(0.9)'
              }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" :unitType="unitType"
				@click="tabtap" />
		</view>
		<view v-if="unitType==1">
			<view class="cellBox" v-for="(item, index) in dataList" :key="item.id" @click="goAssociation(item.id)">
				<view class="rotatBox">
					<view class="imgBox">
						<image :src="item.logoUrl" style="width: 100%; height: 100%"></image>
					</view>
					<view class="cardCss">
						<view class="cardTitle">{{ item.name }}</view>
						<view class="contentCss" v-html="item.introduction"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="unitType==2">
			<view class="cellBox" v-for="(item, index) in dataList" :key="item.id" @click="goEnterprise(item.id)">
				<view class="rotatBox">
					<view class="imgBox">
						<image :src="item.logoUrl" style="width: 100%; height: 100%"></image>
					</view>
					<view class="cardCss">
						<view class="cardTitle">{{ item.name }}</view>
						<view class="contentCss" v-html="item.introduction"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="unitType==3">
			<view class="service-box" v-for="item in serviceList">
				<view class="service-parent" @click="gotoService">
					<view class="text">
						{{item.label}}
					</view>
					<view class="icon">
						<img src="/static/jiantou.png" alt="">
					</view>
				</view>
				<view class="service-children">
					<view class="children-box" v-for="a in item.children" @click="goService(a)">
						<img :src="a.url" alt="">
						<view class="text">
							{{a.label}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 回到顶部 -->
		<view class="wrap">
			<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
		</view>

	</view>
</template>

<script>
	const PLATFORM_WAP = 5;

	export default {
		data() {
			return {
				inx: 0,
				newList: [],
				indicator: false,
				id: 0,
				carouselList: [],
				// 回到顶部样式
				scrollTop: 0,
				mode: "square",
				iconStyle: {
					fontSize: "32rpx",
					color: "#2979ff",
				},
				informationData: [{
						id: 1,
						name: "协会展示",
						unitType: 1,
					},
					{
						id: 2,
						name: "企业展示",
						unitType: 2,
					},
					{
						id: 3,
						name: "综合服务",
						unitType: 3,
					}
				],
				dataList: [],
				unitType: 1,
				page: 1,
				limit: 20,
				userId: 20,
				noticesList: [],
				childrenCategoryList: [],
				recommendList: [],
				serverData: [{
						name: '我要领券',
						url: '/pages/coupon/coupon',
						img: '../../static/errorImage.jpg'
					},
					{
						name: '我要核销',
						url: '/pages/product/favorite',
						img: '../../static/errorImage.jpg'
					},
					{
						name: '科技名企',
						url: '',
						img: '../../static/errorImage.jpg'
					},
					{
						name: '商服推荐',
						url: '/pages/service/list',
						img: '../../static/errorImage.jpg'
					}
				],
				serviceList: []
			};
		},
		onLoad(options) {
			this.loadData();
			this.getTabList();
			this.getNoticesList();
			this.getServiceChildren()
		},
		methods: {
			// 轮播图跳转
			goDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: item.unionValue
				})
			},
			// getChildrenList(e) {
			// 	this.inx = e.currentTarget.id
			// 	this.childrenCategoryList = this.newList[this.inx].children
			// },
			getServiceChildren(){
				this.$api.request('serve', 'tree').then(res => {
					for(var i=0;i<res.data.length;i++){
						if(res.data[i].children.length>0){
							this.serviceList.push(res.data[i])
						}
					}
				})
			},
			gotoService() {
				uni.navigateTo({
					url: '/pages/service/list'
				})
			},
			gotoNews() {
				uni.setStorageSync('option', {
					id: 21
				})
				uni.switchTab({
					url: '/pages/news/news'
				})
			},
			goPage(item) {
				uni.navigateTo({
					url: item
				})

			},
			// 为您推荐
			goRecommend(item) {
				uni.navigateTo({
					url: '/pages/index/service?id=' + item.id
				})
			},
			goService(item) {
				uni.navigateTo({
					url: '/pages/index/service?id=' + item.value
				})
			},
			goServiceList() {
				uni.navigateTo({
					url: '/pages/service/list'
				})
			},
			//协会跳转
			goAssociation(id) {
				uni.navigateTo({
					url: '/pages/index/association?id=' + id
				})
			},
			// 企业跳转
			goEnterprise(id) {
				uni.navigateTo({
					url: '/pages/index/enterprise?id=' + id
				})
			},
			//公告跳转
			goNoticesDetail(id) {
				uni.navigateTo({
					url: '/pages/news/detail?id=' + id
				})
			},
			async loadData() {
				const that = this;
				uni.showLoading({
					title: "正在加载",
				});
				that.$api
					.request("integral", "getIndexData", (failres) => {
						that.$api.msg(failres.errmsg);
						uni.hideLoading();
					})
					.then((res) => {
						const data = res.data;
						console.log(res);
						// 轮播
						if (data.advertisement.t1) {
							data.advertisement.t1.forEach((item) => {
								if (!item.color) {
									item.color = "rgb(205, 215, 218)";
								}
							});
							that.carouselList = data.advertisement.t1;
							console.log(res, 4455);
						}
						//为您推荐
						if (data.serverList) {
							that.recommendList = data.serverList
						}
						uni.hideLoading();
					});
			},
			// 服务
			getCategoryList() {
				const that = this
				that.$api.request('serve', 'tree').then(res => {
					this.newList = res.data
					console.log(this.newList);
					this.newList.forEach(item => {
						console.log(item.children);
						item.children.forEach(a => {
							console.log(a, 666);
							this.childrenCategoryList.push(a)
						})
					})
					if (this.childrenCategoryList.length > 7) {
						this.childrenCategoryList.length = 7
					}
					console.log(this.childrenCategoryList, 11122);
					// this.childrenCategoryList = this.newList[0].children
				})
			},
			//渲染公告的数据
			getNoticesList() {
				const that = this
				that.$api.request('article', 'articlePage', {
					page: that.page,
					limit: that.limit,
					articleClassId: that.userId
				}).then(res => {
					that.noticesList = res.data.items
				})
			},
			//回到顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			//渲染协会和企业的数据
			getTabList() {
				const that = this
				const introductionsList = []
				that.$api.request('advert', 'company', {
					page: that.page,
					limit: that.limit,
					unitType: that.unitType
				}).then(res => {
					that.dataList = res.data.items
					for (let i = 0; i < that.dataList.length; i++) {
						//富文本图片隐藏
						that.dataList[i].introduction = that.dataList[i].introduction.replace(/\<img/gi,
							'<img style="display:none;" ');
					}
				})
			},
			// 一级分类点击
			tabtap(item) {
				this.unitType = item.index + 1
				this.getTabList()
			},
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		// onNavigationBarSearchInputClicked: async function(e) {
		// 	uni.navigateTo({
		// 		url: "/pages/product/search",
		// 	});
		// },
		// #endif
	};
</script>

<style lang="scss">
	.container {
		// top: 5vh;
		position: relative;
		background: #fff;
	}

	/* #ifdef MP */
	.mp-search-box {
		background-color: aqua;
		// position: absolute;
		// left: 0;
		// top: 30upx;
		// z-index: 9999;
		height: 200px;
		width: 100%;
		padding: 120rpx 30upx 0;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			background: rgba(255, 255, 255, 0.6);
			width: 100%;
		}
	}

	/* #endif */

	.post-section {
		// margin-bottom: 20rpx;
		// margin-top: -160rpx;
		height: 60upx;
		line-height: 60upx;
		background-color: #f5f5f5;
		// padding-left: 20upx;
		border-radius: 20rpx;
		margin: -160rpx 30rpx 20rpx;

		.content {
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;
			text-overflow: ellipsis;
			overflow: hidden;
			color: $uni-color-primary;
			white-space: nowrap;
		}
	}

	.icon-xiaoxi:before {
		margin-right: 20rpx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		top: -14vh;

		.carousel {
			// width: 80%;
			height: 380rpx;

			// margin: 0 30rpx;
			.carousel-item {
				height: 350rpx;
				// overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 10px;
				border-radius: 15upx;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 15upx;
				}
			}


		}
	}

	// .u-scroll-list{
	// }
	.parentCategory {
		width: 100%;
		background-color: #fff;
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		align-items: center;
		font-size: 24rpx;
	}

	.scrollItem {
		margin: 20rpx 10rpx 20rpx 10rpx;
		overflow: hidden;
		width: 200rpx;
		height: 60rpx;
		color: #999;
		text-align: center;
		line-height: 60rpx;
	}

	.afterScrollItem {
		margin: 20rpx 10rpx 20rpx 10rpx;
		overflow: hidden;
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: orangered;
		color: #fff;
		border-radius: 45rpx;
	}



	/* 分类 */
	.cate-section {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10rpx 30rpx;
		// background: #fff;
		margin-top: -20rpx;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			padding: 16rpx 30rpx;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}

	// 为您推荐
	.recommend {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10rpx 20rpx;
		margin-top: -20rpx;

		.recommend-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			padding: 16rpx 30rpx;
			border-radius: 15rpx;
			background-color: #fff;
			margin: 8rpx;
		}

		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			box-shadow: 4upx 4upx 20upx rgba(0, 0, 0, 0.3);
		}
	}

	.cardCss {
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		justify-content: space-between;
		overflow: hidden;

		.cardTitle {
			font-size: 15px;
			color: #3b4144;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}


		.contentCss {
			font-size: 24rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			color: #999;
			font-size: 13px;
			overflow: hidden;
			margin-top: 10rpx;
			line-height: 46rpx
		}

		//只能H5显示
		::v-deep img {
			width: 100%;
		}
	}

	.tab-content {
		display: flex;
		margin-top: 20rpx;
		padding: 10rpx;
		background-color: #f5f5f5;
	}

	.rotatBox {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 13px 16px;
		padding-left: 16px;
		flex: 1;
		overflow: hidden;

		.imgBox {
			flex-shrink: 0;
			margin-right: 11px;
			width: 125px;
			height: 75px;
			border-radius: 6px;
			overflow: hidden;
			border: 1px #f5f5f5 solid;
		}
	}

	.cellBox {
		background-color: #f5f5f5;
		margin: 20rpx;
	}

	.service-box {
		margin: 10px;
		background-color: #f5f5f5;
		.service-parent {
			display: flex;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			justify-content: space-between;

			img {
				width: 25px;
				height: 25px;
				margin-top: 8px;

			}
		}

		.service-children {
			display: flex;
			flex-wrap: wrap;

			.children-box {
				display: flex;
				width: 50%;
				border-left: 2px solid #fff;
				margin: 10px auto;
				padding-left: 10px;

				img {
					width: 40px;
					height: 40px;
					padding: 10px;
				}

				.text {
					padding-top: 10px;
				}
			}
		}
	}
</style>
